<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城-flex布局</title>
    <style>
        body{
            background-color:#f5f5f5;
        }
        *{
            margin:0;
            padding:0;
            font-family:Arial, sans-serif,"Microsoft YaHei";
            font-size:16px;
            color:#000;
            text-decoration:none;
            list-style:none;
        }
        .container{
            width:1300px;
            margin:30px auto;
            display:flex;
            justify-content:space-evenly;
            flex-wrap:wrap;
        }

        .product_category{
            width:100%;
            height:60px;
            /* background-color:skyblue; */
            box-sizing: border-box;
            padding:0 25px;
            display:flex;
            justify-content:space-between;
            align-items:center;
        }
        .product_category .item h3{
            font-size:20px;
            font-weight: 400;
            color:#333;
        }
        /* .product_category .item ul{
            background-color:orange;
            display: flex;
        } */
        .product_category .item ul li{
            display: inline-block;
            /* padding:8px 0 8px 25px; */
            padding:5px 0;
            margin-left:25px;
            font-size:15px;
            color:#333;
            border-bottom:2px solid transparent;
            transition:all 0.2s ease;
        }
        .product_category .item ul li:hover{
            color:orange;
            border-bottom:solid orange;
            cursor:pointer;
        }

        /* 左边广告牌 */
        .left{
            width:235px;
            height:615px;
            border-radius:5px;
            background-color:white;
        }
        .left .item{
            width:100%;
            height:200px;
            box-sizing: border-box;
            /* background-color:pink; */
            padding-top:110px;
        }
        .left .item .title{
            padding:0 20px;
            font-size:30px;
            font-weight:bold;
        }
        .left .item .tip{
            padding:0 20px;
            font-size:10px;
            font-weight:bold;
            letter-spacing:5px;
            margin:15px 0;
        }
        .left .item img{
            margin-top:50px;
            width:100%;
        }

        /* 右边商品布局 */
        .right{
            width:990px;
            height:615px;
            /* background-color:pink; */
            display:flex;
            flex-wrap:wrap;
            justify-content:space-between;
            align-content:space-between;
        }

        /* 产品小盒子 */
        .right .item{
            width:235px;
            height:300px;
            box-sizing:border-box;
            border-radius:5px;
            background-color:white;
            text-align:center;
        }

        /* 商品名称 */
        .right .item h5{
            font-size:15px;
            font-weight:500;
        }
        /* 商品描述 */
        .right .item .desc{
            white-space:nowrap;
            text-overflow:ellipsis;
            overflow:hidden;
            font-size:12px;
            color:#ccc;
            padding:10px 10px;
        }
        /* 商品价格 */
        .right .item .price{
            font-size:15px;
        }
        .right .item .new_price{
            color:orange;
        }
        .right .item .old_price{
            font-size:14px;
            color:#ccc;
            text-decoration:line-through;
        }

        /* 最后一个小盒子 */
        .right .last_item{
            background-color:transparent;
            display:flex;
            flex-wrap:wrap;
            align-content:space-between;
        }
        .right .last_item .item_top,
        .right .last_item .item_btm{
            width:235px;
            height:143px;
            border-radius:5px;
            background-color:white;
            display:flex;
            align-items:center;
        }
        .right .last_item p{
            width:58%;
            line-height:30px;
        }
        .right .last_item p span:last-child{
           font-size:13px;
           color:orange;
        }
        .right .last_item img{
            width:100px;
            height:100px;
        }

        /* 盒子悬浮+阴影 */
        .container a{
            transition:all 0.2s linear;
        }
        .container a:hover{
            transform:translateY(-3px);
            box-shadow:0 10px 20px 0px #ccc;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="product_category">
            <div class="item">
                <h3>笔记本 | 平板</h3>
            </div>
            <div class="item">
                <ul>
                    <li>热门</li>
                    <li>查看更多 ></li>
                </ul>
            </div>
        </div>
        <a href=""><div class="left">
                <div class="item">
                    <p class="title">Redmi G Pro 锐龙版 R7</p>
                    <p class="tip">全速进化 再赢一场</p>
                    <img src="1.jpg" alt="">
                </div>
        </div></a>
        <div class="right">
            <a href="">
                <div class="item">
                    <img src="1.jpg" alt="">
                    <h5>小米笔记本Pro X 14</h5>
                    <p class="desc">全新12代英特尔处理器，2.5K 120Hz高清屏，可选MX550独立显卡,CNC一体精雕工艺</p>
                    <p class="price"><span class="new_price">6999元起</span> &nbsp;<span class="old_price">7999元</span></p>
                </div>
            </a>
            <a href="">
                <div class="item">
                    <img src="1.jpg" alt="">
                    <h5>小米笔记本Pro X 14</h5>
                    <p class="desc">全新12代英特尔处理器，2.5K 120Hz高清屏，可选MX550独立显卡,CNC一体精雕工艺</p>
                    <p class="price"><span class="new_price">6999元起</span> &nbsp;<span class="old_price">7999元</span></p>
                </div>
            </a>
            <a href="">
                <div class="item">
                    <img src="1.jpg" alt="">
                    <h5>小米笔记本Pro X 14</h5>
                    <p class="desc">全新12代英特尔处理器，2.5K 120Hz高清屏，可选MX550独立显卡,CNC一体精雕工艺</p>
                    <p class="price"><span class="new_price">6999元起</span> &nbsp;<span class="old_price">7999元</span></p>
                </div>
            </a>
            <a href="">
                <div class="item">
                    <img src="1.jpg" alt="">
                    <h5>小米笔记本Pro X 14</h5>
                    <p class="desc">全新12代英特尔处理器，2.5K 120Hz高清屏，可选MX550独立显卡,CNC一体精雕工艺</p>
                    <p class="price"><span class="new_price">6999元起</span> &nbsp;<span class="old_price">7999元</span></p>
                </div>
            </a>
            <a href="">
                <div class="item">
                    <img src="1.jpg" alt="">
                    <h5>小米笔记本Pro X 14</h5>
                    <p class="desc">全新12代英特尔处理器，2.5K 120Hz高清屏，可选MX550独立显卡,CNC一体精雕工艺</p>
                    <p class="price"><span class="new_price">6999元起</span> &nbsp;<span class="old_price">7999元</span></p>
                </div>
            </a>
            <a href="">
                <div class="item">
                    <img src="1.jpg" alt="">
                    <h5>小米笔记本Pro X 14</h5>
                    <p class="desc">全新12代英特尔处理器，2.5K 120Hz高清屏，可选MX550独立显卡,CNC一体精雕工艺</p>
                    <p class="price"><span class="new_price">6999元起</span> &nbsp;<span class="old_price">7999元</span></p>
                </div>
            </a>
            <a href="">
                <div class="item">
                    <img src="1.jpg" alt="">
                    <h5>小米笔记本Pro X 14</h5>
                    <p class="desc">全新12代英特尔处理器，2.5K 120Hz高清屏，可选MX550独立显卡,CNC一体精雕工艺</p>
                    <p class="price"><span class="new_price">6999元起</span> &nbsp;<span class="old_price">7999元</span></p>
                </div>
            </a>
            <div class="item last_item">
                <a href="">
                    <div class="item_top">
                        <p>
                            <span>小米平板5</span><br/>
                            <span>1700元起</span>
                        </p>
                        <img src="2.jpg" alt="">
                    </div>
                </a>
                <a href="">
                    <div class="item_btm">
                        <p>
                            <span>小米平板5</span><br/>
                            <span>1700元起</span>
                        </p>
                        <img src="2.jpg" alt="">
                    </div>
                </a>
            </div>
        </div>
    </div>
</body>
</html>